<template>
	<view class="carBand">
		<!-- 选择车辆品牌-->
		<view class="search">
			<input class="input1" confirm-type="search" placeholder="请输入" />
			<text class="iconfont icon-sousuo"></text>
		</view>
		<view class="content">
			<view class="item">
				<text>宝马</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>奥迪</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>奔驰</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>保时捷</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>特斯拉</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>沃尔沃</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>法拉利</text>
				<text class="iconfont icon-you"></text>
			</view>
			<view class="item">
				<text>兰博基尼</text>
				<text class="iconfont icon-you"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	@import url("../../../../static/font/iconfont.css");

	.carBand {
		.search {
			height: 170rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 26rpx;
			position: relative;

			.input1 {
				width: 688rpx;
				height: 90rpx;
				padding: 0 30rpx;
				background-color: #efefef;
				border-radius: 60rpx;
			}

			text {
				font-size: 45rpx;
				position: absolute;
				top: 62rpx;
				right: 62rpx;
			}
		}

		.content {
			padding: 0 38rpx;

			.item {
				display: flex;
				padding: 38rpx 0;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;

				text:nth-child(2) {
					color: #ccc;
				}
			}
		}
	}
</style>

